<template>
    <div class="login">
      <div class="logindl" v-if="loginshow">
        <img src="/qttp/xxx.png" alt="" class="xxxgb" @click="setls(false)">
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
          <el-tab-pane label="手机登录" name="first">
            <div class="dl_sj">
              <el-input
                placeholder="请输入手机号码"
                v-model="phone"
                clearable
                :rules="[
                  { required: true, message: '年龄不能为空'},
                  { type: 'number', message: '年龄必须为数字值'}
                ]"
                >
              </el-input>
              <div class="dl_mm">
                <el-input placeholder="请输入密码" v-model="pupwd" show-password></el-input>
                <el-row>
                  <el-button type="success" round>获取验证码</el-button>
                </el-row>
              </div>
              <div class="yhxy">
                <template>
                  <!-- `checked` 为 true 或 false -->
                  <el-checkbox v-model="checked">已阅读并同意&nbsp;
                    <a href="">用户协议</a>&nbsp;和&nbsp;
                    <a href="">隐私协议</a>
                  </el-checkbox>
                </template>
              </div>
              <el-row>
                <el-button type="danger" round :disabled="!checked" @click="loginsj()">登录</el-button>
              </el-row>
              <div class="lianjie">
                <a href="/">忘记密码？</a>
                <span @click="setls(loginshow=false);setis(indexshow=true)">前去注册！</span>
              </div>
              <div class="dsf">
                <hr>
                <div>使用第三方登录</div>
              </div>
              <div class="dsflj">
                <a href="/"><img src="/img/wx.png" alt=""></a>
                <a href="/"><img src="/img/qq.png" alt=""></a>
                <a href="/"><img src="/img/wb.png" alt=""></a>
              </div>
              <a href="/" class="gddsf">更多第三方登录</a>
            </div>
          </el-tab-pane>
          <el-tab-pane label="账号登录" name="second">
            <div class="dl_sj">
              <el-input
                placeholder="请输入账号"
                v-model="uname"
                clearable>
              </el-input>
              <div class="dl_mm">
                <el-input placeholder="请输入密码" v-model="zupwd" show-password></el-input>
              </div>
              <div class="yhxy">
                <template>
                  <!-- `checked` 为 true 或 false -->
                  <el-checkbox v-model="checked">已阅读并同意&nbsp;
                    <a href="">用户协议</a>&nbsp;和&nbsp;
                    <a href="">隐私协议</a>
                  </el-checkbox>
                </template>
              </div>
              <el-row>
                <el-button type="danger" round :disabled="!checked" @click="loginzh()">登录</el-button>
              </el-row>
              <div class="lianjie">
                <a href="/">忘记密码？</a>
                <span @click="setls(loginshow=false);setis(indexshow=true)">前去注册！</span>
              </div>
              <div class="dsf">
                <hr>
                <div>使用第三方登录</div>
              </div>
              <div class="dsflj">
                <a href="/"><img src="/img/wx.png" alt=""></a>
                <a href="/"><img src="/img/qq.png" alt=""></a>
                <a href="/"><img src="/img/wb.png" alt=""></a>
              </div>
              <a href="/" class="gddsf">更多第三方登录</a>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
import { mapMutations,mapState } from 'vuex';
    export default {
      computed:{
        ...mapState(["loginshow"],["indexshow"])
      },
      data() {
        return {
          activeName: 'first',
          uname: '',
          zupwd:'',
          pupwd:'',
          phone:'',
          checked:false,
          unamess:null,
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        ...mapMutations(["setls"]),
        ...mapMutations(["setis"]),
        ...mapMutations(["settx"]),

        loginzh(){
          // 验证账号
          if(!/^[0-9a-zA-Z\u4e00-\u9fa5]{2,16}$/.test(this.uname)){
            alert('账号格式错误')
            return
          }
          if(!this.zupwd){
            alert('请输入密码')
            return
          }
          const url="/login"
          const params=`uname=${this.uname}&upwd=${this.zupwd}`
          console.log(params)
          this.axios.post(url,params).then((res)=>{
            console.log(res)
            // 管理员登录
            if(res.data.code==222){
              this.$store.commit('updateLoginState',res.data.data[0].uname)
              this.$store.commit('updateLoginState1',res.data.data[0].headp)
              this.setls(false)
              this.$router.push('/houtaizy')
            }else if(res.data.code==200){//用户登录
              // this.settx(res.data.data[0].headp)
              // this.settx({headp:res.data.data[0].headp,uname:res.data.data[0].uname})
              this.$store.commit('updateLoginState',res.data.data[0].uname)
              this.$store.commit('updateLoginState1',res.data.data[0].headp)
              this.setls(false)
              if(!this.$route.path=='/'){
                this.$router.push('/')
              }
              this.$router.push('/')
            }else if(res.data.code){
              alert('账号密码错误')
            }
          })
        },
        loginsj(){
          // 验证手机号码
          if(!/^[1][3-9][0-9]{9}$/.test(this.phone)){
            alert('手机号码格式错误')
            return
          }
          if(!this.pupwd){
            alert('请输入密码')
            return
          }
          const url="/login1"
          const params=`phone=${this.phone}&upwd=${this.pupwd}`
          // console.log(params)
          this.axios.post(url,params).then((res)=>{
            console.log(res)
            if(res.data.code==200){
              // this.settx({headp:res.data.data[0].headp,uname:res.data.data[0].uname})
              this.$store.commit('updateLoginState',res.data.data[0].uname)
              this.$store.commit('updateLoginState1',res.data.data[0].headp)
              this.setls(false)
              if(!this.$route.path=='/'){
                this.$router.push('/')
              }
              this.$router.push('/')

            }else{
              alert('账号密码错误')
            }
          })
        }
      }
    }
</script>

<style lang="scss">
  .logindl{
    z-index: 1000;
    position: fixed;
    width: 400px; 
    height: 400px; 
    top: 150px; 
    left: calc(50% - 200px);
    background-color: rgb(252, 252, 252);
    border-radius: 15px;
    box-shadow: 7px 7px 20px 4px rgb(119, 106, 114);
    .xxxgb{
      position: absolute;
      z-index: 1000;
      top: 10px;
      right: 10px;
      width: 20px;
    }
    .el-tabs__active-bar{
      width: 0;
      height: 0;
    }
    div.el-tabs__nav-wrap::after{
      content: '';
      height: 0;
      width: 0;
    }
    .el-tabs__item{
      font-size: 20px;
      font-weight: 600;
      margin-top: 20px;
      color: rgb(79, 76, 76);
      padding: 0;
      &:hover{
        color: #000;
      }
    }
    .el-tabs__item.is-active{
      color: rgb(0, 0, 0);
    }
    .el-tabs__nav-scroll{
      width: 250px;
      margin: 0 auto;
    }
    .el-tabs__content{
      width: 320px;
      margin: 0 auto;
    }
    .el-input__inner{
        border-radius: 35px;
        margin: 5px 0;
      }
    .dl_mm{
      display: flex;
    }
    .el-button--success{
      width: 80px;
      margin-top: 5px;
      padding: 0px;
      margin-left: 8px;
      span{
        margin-left: -12px;
        font-size: 12px;
      }
    }
    .yhxy{
      text-align: center;
      margin: 10px auto;
      a{
        color: #409eff;
      }
    }
    .el-row{
      text-align: center;
    }
    .el-button--danger{
      width: 280px;
    }
    .lianjie{
      margin: 10px;
      display: flex;
      padding: 0 2px;
      justify-content: space-between;
      a{
        color: #606266;
        font-size: 14px;
      }
      span{
        color: #606266;
        font-size: 14px;
      }
    }
    .dsf{
      margin-top: 10px;
      hr{
        border: 0;
        border-top:3px solid #615f5f;
        border-radius: 2px;
      }
      div{
        position: relative;
        margin: 0 auto;
        background-color: #d4cece;
        width: 130px;
        text-align: center;
        top: -13px;
        font-size: 16px;
      }
    }
    .dsflj{
      display: flex;
      justify-content: center;
      a{
        margin:0 20px;
        img{
          border-radius: 50%;
          width: 35px;
          height: 35px;
        }
      }
    }
    .gddsf{
      color: rgb(94, 93, 93);
      font-size: 10px;
      display:block;
      margin-top: 5px;
      text-align: center;
    }
  }
</style>